.cta-boby{
    padding: 2rem 2rem 1rem 2rem;
    background-color: var(--color-white);
  }

  /* 기본: PC에서는 숨김 */
.only-mobile {
    display: none;
  }
  
  /* 모바일 전용 노출 (예: 768px 이하) */
  @media (max-width: 768px) {
    .only-mobile {
      display: inline;
    }
  }

  :root {
    --banner-color: #000;
    --gradient-start: #fff;
    --gradient-end: #fff;
    --accent-color: #000
  }
  
  .theme--meet {
    --banner-gradient-start: #BAE7FD;
    --banner-gradient-end: #2992E2;
    --gradient-start: #F2F8FF;
    --gradient-end: #DCEDFF;
    --accent-color: #4D85DF;
  }
  
  .theme--klass {
    --banner-gradient-start: #ACEADD;
    --banner-gradient-end: #3CCAB2;
    --gradient-start: #F3FAF9;
    --gradient-end: #CFE7E2;
    --accent-color: #75C5B2;
  }

  .theme--learn {
    --banner-gradient-start: #BFEDD3;
    --banner-gradient-end: #48C57D;
    --gradient-start: #F2FFF3;
    --gradient-end: #DEF2E4;
    --accent-color: #75C5B2;
  }
    
  .theme--call {
    --banner-gradient-start: #CFC4FE;
    --banner-gradient-end: #8C7EC8;
    --gradient-start: #F7F6FF;
    --gradient-end: #DED8ED;
    --accent-color: #7A71C8;
  }
  
  .theme--chat {
    --banner-gradient-start: #BBE1EE;
    --banner-gradient-end: #67B9D5;
    --gradient-start: #EFFBFF;
    --gradient-end: #D3EAF2;
    --accent-color: #66BADA;
  }

  .theme--form {
    --banner-gradient-start: #B8CFF4;
    --banner-gradient-end: #7191D2;
    --gradient-start: #F8F8FF;
    --gradient-end: #E0E2F1;
    --accent-color: #5C85D2;
  }

  .theme--senspet {
    --banner-gradient-start: #FFE0BB;
    --banner-gradient-end: #FEC15A;
    --gradient-start: #FFFAF2;
    --gradient-end: #FEF5E4;
    --accent-color: #FFC15B;
  }

  /*솔루션 히어로*/
.solution-hero-section {
    width: 100%;
    padding: 4rem;
    margin-top: 4.625rem;
    box-sizing: border-box;
    background: linear-gradient(0deg, #F7F8F9 0%, #ffffff 100%);
  }
  
  .solution-hero {
    max-width: 1240px;
    background: linear-gradient(90deg, var(--gradient-start), var(--gradient-end));
    padding: 4.5rem 6rem;
    box-sizing: border-box;
    margin: 0 auto; /* ✅ 여기로 가운데 정렬 이동 */
    border-radius: 24px;
    box-shadow: 20px 20px 36px rgba(233, 238, 244, 0.5);
  }
  
  .solution-hero__inner {
    display: flex;
    align-items: center;
    justify-content: space-between; /* or center */
    gap: 2rem;
    flex-wrap: wrap;
  }
  
  .solution-hero__content {
    display: flex;
    align-items: center;
    justify-content: space-between; /* 두 요소 나란히 배치 */
    flex-wrap: wrap;
    width: 100%;
  }
  .solution-hero__text {
    flex: 1;
    min-width: 300px;
  }
  
  .solution-hero__logo {
    display: block;
    margin-bottom: 1rem;
    width: auto;
    height: 40px;
  }
  
  .solution-hero__title {
    color: var(--color-gray-900);
    margin-bottom: 1rem;
  }
  
  .solution-hero__desc {
    color: var(--color-gray-700);
    margin-bottom: 1.5rem;
    font-size: 1.125rem;
  }
  
  .solution-hero__btn {
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    gap: 0.375rem;
    padding: 0.75rem 1.5rem;
    border-radius: 2rem;
    font-size: 1rem;
    color: var(--color-white);
    background-color: var(--color-gray-600);
    text-decoration: none;
    transition: 0.2s;
  }
  
  
  .solution-hero__btn:hover {
    background-color: var(--color-primary-700);
  }
  
  .solution-hero__image {
    flex: 1;
    min-width: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .solution-hero__image img {
    max-width: 100%;
    height: auto;
  }


  /*솔루션 키포인트*/
  .solution-keypoint {
    padding: 5rem 1rem 12rem 1rem;
    background: url('/02 solution/img/key-container.png') no-repeat bottom center / cover;
    text-align: center;
  }
  
  .solution-keypoint__inner {
    max-width: 1240px;
    margin: 0 auto;
  }
  
  .solution-keypoint__title {
    color: var(--color-primary-900);
    margin-bottom: 3rem;
  }
  
  .solution-keypoint__items {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1.5rem;
    padding: 0 4rem;
  }
  
  .solution-keypoint__item {
    width: 240px;
    background: #fff;
    border-radius: 1rem;
    padding: 3.5rem 2.5em;
    box-shadow: 20px 20px 36px rgba(233, 238, 244, 0.5);
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .solution-keypoint__icon img {
    width: 90px;
    height: 90px;
    object-fit: contain;
    margin-bottom: .5rem;
  }
  
  .solution-keypoint__text-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 68px;
    width: 100%;
  }

  .solution-keypoint__text {
    color: #222;
    line-height: 1.7;
    
  } 

  .solution-feature {
    padding: 6rem 4rem;
    background-color: #fff;
  }
  
  .solution-feature__inner {
    max-width: 1240px;
    margin: 0 auto;
    display: flex;
    flex-wrap: nowrap;
    gap: 1.5rem;
    align-items: center;
    justify-content: space-between;
  }
  
  .solution-feature__text {
    flex: 1 1 auto;
  }
  
  .solution-feature__label {
    display: inline-block;
    color: var(--color-primary-900);
    margin-bottom: 0.5rem;
  }
  
  .solution-feature__title {
    color: var(--color-black);
    margin-bottom: 1rem;
  }
  
  .solution-feature__desc {
    color: var(--color-gray-700)
  }
  
  .solution-feature__image {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
    max-width: 570px;
    box-shadow: 20px 20px 36px rgba(221, 221, 221, 0.);
    border-radius: 1rem;
  }
  
  .solution-feature__image img {
    max-width: 100%;
    height: auto;
    border-radius: 1rem;
  }

  .solution-feature--reverse {
    background-color: #f9fafb;
  }
  
  .solution-feature--reverse .solution-feature__inner {
    flex-direction: row-reverse;
  }
  
  .solution-feature--reverse .solution-feature__text {
    text-align: right;
  }


  /*cta banner*/

.cta-banner-solution {
    width: 100%;
    position: relative;
    background: linear-gradient(45deg, var(--banner-gradient-start), var(--banner-gradient-end));
    border-radius: 20px;
    padding: 1rem 1rem;
    overflow: hidden;
    color: white;
    text-align: center;
    height: 320px;
    max-width: 1240px;
    margin: 0 auto;
  }
  
  .cta-banner__overlay-solution {
    position: absolute;
    inset: 0;
    background-image: url('/img/cta-banner-bg.png'); 
    background-size: cover;
    background-position: center;
    opacity: 0.2;
    z-index: 1;
    mix-blend-mode: soft-light;
  }
  
  .cta-banner__content-solution {
    position: relative;
    z-index: 2;
    max-width: 800px;
    margin: 0 auto;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;   
    justify-content: center; 
    text-align: center;
    
  }
  
  .cta-banner__sub-solution {
    margin-bottom: 1.5rem;
  }
  
  .cta-banner__title-solution {
    margin-bottom: .5rem;
  }
  
  .cta-banner__btn-solution {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 2rem;
    border: 1.5px solid #Fff; 
    border-radius: 9999px;
    color: white;
    background-color: rgba(255, 255, 255, 0.1); 
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
    box-shadow: 0.75rem 0.75rem 2rem rgba(49, 49, 49, 0.1);
  }
  
  .cta-banner__btn-solution:hover {
    background-color: #fff;
    color: var(--accent-color)
  }
  
  .cta-icon {
    stroke: currentColor;
  }


@media screen and (max-width: 1024px) {

    .solution-hero{
        padding: 4rem 3.5rem;
    }

    .solution-hero-section {
        width: 100%;
        padding: 2.25rem 2rem;
        margin-top: 4.625rem;
      }

      .solution-hero__title {
        font-size: 1.875rem;
      }

      .solution-hero__desc{
        font-size: 16px;
      }

      .solution-keypoint {
        padding: 3rem 2rem 8rem 2rem;
        background: url('/02 solution/img/key-container.png') no-repeat bottom center / cover;
        text-align: center;
      }

      .solution-keypoint__title{
        font-size: 1.75rem;
      }
      
    .solution-keypoint__items {
      flex-wrap: wrap;
      justify-content: center;
    }
  
    .solution-keypoint__item {
      width: calc(50% - 1rem);
    }
  
    .solution-feature {
        padding: 8rem 2rem;
        background-color: #fff;
      }

    .solution-feature__inner {
      flex-direction: column;
      width: 100%;
      height: auto;
      max-width: 100%;
      padding: 0 0rem;
      gap: 4.5rem;
    }

    .solution-feature__title{
      font-size: 1.875rem;
    }

    .solution-feature__desc{
      font-size: 1rem;
    }
  
    .solution-feature--reverse .solution-feature__inner {
      flex-direction: column;
    }

    .solution-feature--reverse {
        background-color: #f9fafb;
      }

      .solution-feature--reverse .solution-feature__text{
        text-align: left;
      }

    .solution-feature__text {
        flex: 0;
        width: 100%;
        text-align: left;
      }
      
      .solution-feature__desc{
        font-size: 1.125rem;
      }
  

    .solution-keypoint__item {
        flex-direction: row;
        align-items: center;
        text-align: left;
        padding: 3rem 2rem;
      }
    
      .solution-keypoint__icon {
        margin-bottom: 0;
        margin-right: 1rem;
      }
    
      .solution-keypoint__text {
        width: 100%;
        text-align: center;
      }

      .solution-keypoint__icon img{
        margin: 0;
      }

      .solution-feature__image{
        flex: 0;
        max-width: 100%;
      }

      .solution-feature__image img{
        width: 100%;
        height: auto;
      }
  }

@media screen and (max-width: 768px) {
    .solution-hero {
      padding: 2rem 1rem;
    }

    .solution-hero-section{
        padding: 1.5rem;
        margin-top: 64px;
    }
  
    .solution-hero__content {
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center; /* 텍스트 전체 중앙정렬 */
    }
  
    .solution-hero__text {
      text-align: center;
      margin-bottom: 0rem;
      min-width: 0px;
    }
  
    .solution-hero__image { 
      justify-content: center;
      margin-top: 0.75rem;
      max-width: 300px;
      width: auto;
      height: auto;
    }

    .solution-hero__logo {
        display: block;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        height: 36px;
        width: auto;
      }

      .solution-hero__title{
        font-size: 24px;
        margin-bottom: 8px;
      }
    
      .solution-hero__desc{
        font-size: .875rem;
        margin-bottom: 0.5rem;
      }

      .solution-hero__btn{
        padding: 0.5rem 1.25rem;
        font-size: 14px;
        margin-bottom: 0.75rem;
        margin-top: 0.75rem;
      }

      .solution-keypoint__title{
        font-size: 24px;
      }

      .solution-keypoint__text{
        text-align: right;
        font-size: 1rem;
      }

      .solution-keypoint__items {
        flex-direction: column;
        align-items: center;
        gap: 1.5rem; /* 카드 간 간격 */
        padding: 0
        ;
      }
    
      .solution-keypoint__item {
        width: 100%;
        max-width: 380px; /* 중앙 정렬 + 너무 넓지 않게 제한 */
        padding: 1.5rem 2rem
      }

      .solution-keypoint__icon{
        width: 72px;
        height: 72px;
      }
      
      .solution-keypoint__icon img{
        width: 72px;
        height: 72px;
      }

      .solution-feature__inner{
        padding: 0rem;
        gap: 24px;
      }

      .solution-feature{
        padding: 4rem 1.5rem;
      }

      .solution-feature__title{
        font-size: 24px;
      }

      .solution-feature__desc{
        font-size: .875rem;
      }

      .cta-banner-solution {
        border-radius: 20px;
        padding: 1rem 1rem;
        overflow: hidden;
        color: white;
        text-align: center;
        height: 228px;
      }
      
      .cta-banner__overlay-solution {
        position: absolute;
        inset: 0;
        background-image: url('/img/cta-banner-bg.png'); 
        background-size: cover;
        background-position: center;
        opacity: 0.2;
        z-index: 1;
        mix-blend-mode: soft-light;
      }
      
      .cta-banner__content-solution {
        position: relative;
        z-index: 2;
        max-width: 800px;
        margin: 0 auto;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;   
        justify-content: center; 
        text-align: center;
        
      }
      
      .cta-banner__sub-solution {
        margin-bottom: 1.25rem;
        font-size: .875rem;
      }
      
      .cta-banner__title-solution {
        font-size: 1.5rem;
        margin-bottom: .5rem;
        line-height: 1.4;
      }
      
      .cta-banner__btn-solution {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.5rem 1.5rem;
        color: white;
        font-size: 14px;
      }
      

      .cta-boby{
        padding: 1rem 1.5rem 0rem 1.5rem;
      }

      }